<template>
<view>
  <!-- 搜索开始 -->
  <search></search>
  <!-- 搜索结束 -->
  <!-- 内容部分开始 -->
  <view class="cate">
    <scroll-view scroll-y class="cate-left">
      <block v-for="(item,index) in cateList" :key="index">
        <view class="cate-left-item" :class="{'active' : index == tabIndex}" @tap="changeIndex(index)">
          {{item.cat_name}}
        </view>
      </block>
    </scroll-view>
    <scroll-view scroll-y class="cate-right">
      <block v-for="(subitem,subindex) in cateContent" :key="subindex">
        <view class="floor">
          <view class="floor-title">
            {{subitem.cat_name}}
          </view>
          <view class="floor-list">
            <block v-for="(item,index) in subitem.children" :key="index">
              <view class="floor-list-item" @tap="jumpDetails(item.cat_name)">
                <image :src="'https://autumnfish.cn/wx/'+ item.cat_icon"></image>
                <view>{{item.cat_name}}</view>
              </view>
            </block>
          </view>
        </view>
      </block>
    </scroll-view>
  </view>
  <!-- 内容部分结束 -->
</view>
</template>

<script>
import Search from '@/components/search'
import {
  classify
} from '@/api'
export default {
  data() {
    return {
      tabIndex: 0,
      cateList: [],
      cateContent: []
    }
  },
  components: {
    Search
  },
  mounted() {
    classify.getCateList().then(res => {
      this.cateList = res.data.message
      this.cateContent = this.cateList[this.tabIndex].children
    })
  },
  methods: {
    changeIndex(index) {
      this.tabIndex = index
      this.cateContent = []
      setTimeout(()=>{
      this.cateContent = this.cateList[this.tabIndex].children
      },0)
    },
    jumpDetails(keyword){
      console.log(keyword)
      wx.navigateTo({ url: '/pages/goods_list/main' + '?keyword=' + keyword });
    }
  }
}
</script>

<style>
.search {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
}
.cate {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 107rpx;
  bottom: 0;
}

.cate-left {
  width: 200rpx;
  height: 100%;
}

.cate-left-item {
  line-height: 100rpx;
  text-align: center;
  background-color: #f4f4f4;
  position: relative;
}

.cate-left-item.active {
  color: #eb4450;
  background-color: #fff;
}

.cate-left-item.active::before {
  content: '';
  width: 10rpx;
  background-color: #eb4450;
  position: absolute;
  top: 20rpx;
  bottom: 20rpx;
  left: 0;
}
.cate-right {
  flex: 1;
  height: 100%;
}

.floor-title {
  text-align: center;
  margin: 30rpx 0;
}

.floor-title::before,
.floor-title::after {
  content: "/";
  color: #666;
  margin: 0 20rpx;
}

.floor-list {
  display: flex;
  flex-wrap: wrap;
}

.floor-list-item {
  width: 33.3333%;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  margin: 20rpx 0;
}

/* 分类右边 */
.floor-list-item image {
  width: 120rpx;
  height: 100rpx;
}
</style>
